<template>
    <div id="myChart" :style="{ width: '208px', height: '108px' }" ref='myRef'></div>
</template>
<script setup>
import * as echarts from 'echarts'
const myRef = ref(null)
const props = defineProps(['xData', 'yData'])
onMounted(() => {
    renderChart()
})
const renderChart = () => {
    const myChart = echarts.init(myRef.value)
    myChart.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: props.xData,
            axisTick: {//坐标轴刻度
                show: false
            },
            axisLabel: {
                interval: 'auto'
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: false // 不显示 y 轴标签
            }
        },
        grid: {
            top: 10,
            bottom: 25,
            left: 20
        },
        series: [
            {
                symbol: 'none',
                lineStyle: {
                    width: 1,
                    color: '#3677a8' // 设置线的颜色为红色
                },
                data: props.yData,
                type: 'line',
            }
        ]
    })
}
</script>
<style scoped lang='scss'></style>